@extends('layouts.app')

@section('content')

    <div class="container mx-auto mt-4 flex">


        <div class=" w-full ">
            <div class="card  bg-base-100 justify-center shadow-xl flex items-center p-4 ">

                <div class="w-full " style="height: 700px;overflow: auto">

                    @foreach(\App\Models\ChatRoom::orderBy('created_at', 'asc')->get() as $item)
                        <div class="chat w-full
                    @if($item->user_id == auth()->id())
                    chat-end
                    @else
                    chat-start
                    @endif

                    ">
                            <div class="chat-image avatar">
                                <div class="w-10 rounded-full">
                                    <img
                                         src="https://ui-avatars.com/api/?name={{ $item->user->nickname }}"/>
                                </div>
                            </div>
                            <div class="chat-header">
                                {{ $item->user->nickname }}
                                <time class="text-xs opacity-50">{{ $item->created_at->diffforHumans() }}</time>
                            </div>
                            <div class="chat-bubble">{{ $item->content }}</div>
                        </div>
                    @endforeach

                </div>

            </div>

            <div class="card  bg-base-100 justify-center shadow-xl flex items-center px-4 py-2 mt-2">

                <form action="/postChat" class="w-full " method="post">
                    <div class=" flex flex-col ">
                        @csrf
                        <textarea required name="content" class="textarea rounded-0 textarea-primary" placeholder="畅所欲言吧！！！"></textarea>
                        <button class="btn btn-primary btn-sm mt-2">发布</button>
                    </div>

                </form>
            </div>

        </div>


    </div>

@endsection
